<template>
  <!-- v-model="dataList" @query="queryList" -->
  <z-paging>
    <template #top>
      <view class="subsection">
        <up-subsection :list="types" :current="current" bgColor="#f2f2f2" activeColor="#fff"
          @change="subsectionChange"></up-subsection>
      </view>
    </template>
    <view class="approval-center">
      <view class="list-content">
        <swiper class="swiper" :current="current" @transition="swiperTransition"
          @animationfinish="swiperAnimationfinish">
          <swiper-item class="swiper-item" v-for="(item, index) in types" :key="index">
            <swiper-list-item ref="listItem" :tabIndex="index" :currentIndex="current"></swiper-list-item>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </z-paging>
</template>

<script>
import SwiperListItem from './components/listContent.vue'
export default {
  components: {
    SwiperListItem
  },
  data() {
    return {
      types: ['全部', '待审核', '已审核'],
      dataList: [],
      current: 0
    }
  },
  onShow() {
    // 在页面onShow的时候，刷新当前列表（不是必须的）
    this.$refs.listItem && this.reloadCurrentList();
  },
  computed: {
    currentFetch() {
      return [getApplyList, getCheckList, getCheckedList][this.current]
    }
  },
  watch: {
  },
  methods: {
    subsectionChange(index) {
      this.current = index;
    },
    // swiper滑动结束
    swiperAnimationfinish(e) {
      this.subsectionChange(e.detail.current)
    },
    reloadCurrentList() {
      this.$refs.listItem[this.current].reload();
    },
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() { },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style lang="scss" scoped>
.approval-center {
  width: 100vw;
  height: 100%;
  box-sizing: border-box;
  padding: 20rpx;
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #f2f2f2;
}

.subsection {
  width: 100vw;
  box-sizing: border-box;
  padding: 20rpx;
  background-color: #f2f2f2;
}


:deep(.u-subsection--button__bar) {
  background-color: #c30d23 !important;
}

.swiper {
  height: 100%;
}

:deep(.zp-paging-container-content) {
  height: 100% !important;
}

.list-content {
  height: 100%;
  background: #fff;
  box-shadow:
    0px 0px 0.7px rgba(0, 0, 0, 0.009),
    0px 0px 1.8px rgba(0, 0, 0, 0.013),
    0px 0px 3.7px rgba(0, 0, 0, 0.017),
    0px 0px 7.7px rgba(0, 0, 0, 0.021),
    0px 0px 21px rgba(0, 0, 0, 0.03);
}
:deep(.zp-main-image-rpx) {
  width: 750rpx !important;
  height: 750rpx !important;
}
</style>